<template>
  <cjui-page-panel header="Skill Level">
    <div v-for="(item, i) in progressState.list" :key="i" class="progress-item">
      <div class="progress-title flex justify-between">
        <small class="text-muted">{{ item.label }}</small>
        <span class="text-per">{{ `${item.value}%` }}</span>
      </div>
      <el-progress :show-text="false" :percentage="item.value" />
    </div>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
const progressState = reactive<any>({
  list: []
})

onMounted(() => {
  progressState.list = [
    {
      label: 'Html',
      value: 30
    },
    {
      label: 'CSS',
      value: 50
    },
    {
      label: 'JavaScript',
      value: 70
    }
  ]
})
</script>

<style lang="scss" scoped>
.progress-item {
  margin-bottom: 24px;
}

.progress-title {
  margin-bottom: 10px;
}

.text-muted,
.text-per {
  font-size: 12px;
  color: var(--el-text-color-regular);
}
</style>
